<ngx-datatable *ngIf="!conf.showSpinner"
    #datatable class='material' 
    [style.height.px]="tableHeight"
    [rows]='data' 
    [columnMode]="'force'" 
    [rowHeight]="50" 
    [headerHeight]="50" 
    [footerHeight]="50"
    [scrollbarV]="true">
  <ngx-datatable-column name="Label">
    <ng-template let-column="column" ngx-datatable-header-template>
      <span class="datatable-header-cell-label">{{'Name' | translate}}</span>
    </ng-template>
    <ng-template let-value="value" ngx-datatable-cell-template>
      <div id="row-name__{{value}}"
      ix-auto ix-auto-type="value" ix-auto-identifier="{{value}}">{{value}}</div>
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column name="State">
    <ng-template let-column="column" ngx-datatable-header-template>
      <span class="datatable-header-cell-label">{{'Running' | translate}}</span>
    </ng-template>
    <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
      <mat-spinner [diameter]='40' *ngIf="row['onChanging']; else actionButtons"></mat-spinner>
      <ng-template #actionButtons>
        <div class="clickable" 
          id="overlay__{{row.label}}_Running"
          ix-auto ix-auto-type="overlay" ix-auto-identifier="{{row.label}}_Running"
          (click)="this.conf.toggle(row)" 
          matTooltip="{{value}}" matTooltipPosition="right">
        </div>
        <mat-slide-toggle
          [checked]="value === 'RUNNING' ? true : false"
          id="slide-toggle__{{row.label}}_Running"
          ix-auto ix-auto-type="slider" ix-auto-identifier="{{row.label}}_Running">
        </mat-slide-toggle>
      </ng-template>
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column name="Enable">
    <ng-template let-column="column" ngx-datatable-header-template>
      <span class="datatable-header-cell-label">{{'Start Automatically' | translate}}</span>
    </ng-template>
    <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
      <mat-checkbox id="checkbox__{{row.label}}" class="checkbox" style="position:absolute;bottom:16px;" [(ngModel)]="row.enable" (change)="this.conf.enableToggle($event, row)"
        ix-auto ix-auto-type="checkbox" ix-auto-identifier="{{row.label}}_Start Automatically"></mat-checkbox>
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column name="Actions" [flexGrow]="2">
    <ng-template let-column="column" ngx-datatable-header-template>
      <span class="datatable-header-cell-label">{{'Actions' | translate}}</span>
    </ng-template>
    <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
      <button mat-icon-button id="action-button__{{row.label}}" (click)="this.conf.editService(row.title)" style="position:absolute;bottom:6px;"  matTooltip="Configure" matTooltipPosition="right" 
        ix-auto ix-auto-type="button" ix-auto-identifier="{{row.label}}_Actions">
        <mat-icon>edit</mat-icon>
      </button>
      <button mat-icon-button (click)="this.conf.openNetdataPortal()" style="position: relative;bottom:3px;left:35px"  matTooltip="Launch" matTooltipPosition="right" *ngIf="row.title == 'netdata' && row.state == 'RUNNING'">
        <mat-icon>featured_play_list</mat-icon>
      </button>
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>
